<template>
  <view>
    <MxyHeader title="材料审核" />
    <MxySearchBar v-model="query.name" placeholder="队伍名称/中学" @search="load(1)" @reset="query.name='';load(1)" />
    <MxyTable :columns="cols" :data="list" :total="total" :page-size="PAGE_SIZE" @page-change="load">
      <template #status="{row}">
        <text :class="row.status">{{ row.status==='pass'?'已通过':row.status==='reject'?'已驳回':'待审核' }}</text>
      </template>
      <template #action="{row}">
        <button v-if="row.status==='pending'" size="mini" @click="audit(row.id,true)">通过</button>
        <button v-if="row.status==='pending'" size="mini" type="warn" @click="audit(row.id,false)">驳回</button>
      </template>
    </MxyTable>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getMaterialList, auditMaterial } from '@/common/api.js'
import { PAGE_SIZE } from '@/common/config.js'
const query = reactive({ name:'' })
const list  = ref([])
const total = ref(0)
const cols = [
  { label:'队伍名称', key:'teamName' },
  { label:'中学名称', key:'school' },
  { label:'活动批次', key:'batch' },
  { label:'提交时间', key:'time' },
  { label:'材料状态', key:'status', slot:true },
  { label:'操作', key:'action', slot:true, width:160 }
]
const load = (p=1) => getMaterialList({ page:p, ...query }).then(r => { list.value=r.list; total.value=r.total })
load(1)
const audit = (id,pass) => auditMaterial(id,pass).then(()=>{ uni.showToast({title:'操作成功'}); load(1) })
</script>
<style scoped>
status{ color:#007aff; }
status.pass{ color:#07c160; }
status.reject{ color:#fa3534; }
</style>